<template>
  <div class="form-single-fragment" style="position: relative;">
    <div class="clearfix">
      <el-button type="primary" size="mini" class="fr" @click="addFromdata" v-if="verifyStatus!=1">创建回款计划</el-button>
    </div>
    <el-row :gutter="20">
      <el-col :span="8">
        <ul>
          <div class="primary">进行中</div>
          <li v-for="(item, index) in tasklist" :key="index">
            <div class="Taskslist" @click="getTasks(item)" v-if="item.contracTaskStatus==1||item.contracTaskStatus==-1">
              <div>
                <h4>{{item.taskName}}</h4>
                <span><i class="el-icon-time"></i>{{item.endDate}} 截止</span>
                <el-button type="primary" size="mini" round v-if="item.contracTaskStatus==1">进行中</el-button>
                <el-button type="danger" size="mini" round v-if="item.contracTaskStatus==-1">审核驳回</el-button>
              </div>
              <div class="listimg">
                <el-image :src="urlimg" fit="cover"></el-image>
              </div>
            </div>
          </li>
        </ul>
      </el-col>
      <el-col :span="8">
        <ul>
          <div class="warning">待审核</div>
          <li v-for="(item, index) in tasklist" :key="index">
            <div class="Taskslist" @click="handleInfo(item)" v-if="item.contracTaskStatus==2">
              <div>
                <h4>{{item.taskName}}</h4>
                <span><i class="el-icon-time"></i>{{item.endDate}} 截止</span>
                <el-button type="warning" size="mini" round>审核中</el-button>
              </div>
              <div class="listimg">
                <el-image :src="urlimg" fit="cover"></el-image>
              </div>
            </div>
          </li>
        </ul>
      </el-col>
      <el-col :span="8">
        <ul>
          <div class="success">已完成</div>
          <li v-for="(item, index) in tasklist" :key="index">
            <div class="Taskslist" @click="handleInfo(item)" v-if="item.contracTaskStatus==3">
              <div>
                <h4>{{item.taskName}}</h4>
                <span><i class="el-icon-time"></i>{{item.endDate}} 截止</span>
                <el-button type="success" size="mini" round>已完成</el-button>
              </div>
              <div class="listimg">
                <el-image :src="urlimg" fit="cover"></el-image>
              </div>
            </div>
          </li>
        </ul>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { Contracts } from '@/api/projectAdministration.js';
import TasksAdd from '../ContractsTasksAdd.vue';
import TasksDetail from '../ContractsTasksDetail.vue';
export default {
  name: 'Tasks',
  data () {
    return {
      urlimg: require('@/assets/img/icon_people.png'),
      loading: false,
      isShowloading: false,
      activeName: 'first',
      userId: null,
      situation: 1,
      customerId: '',
      verifyStatus: '',
      tasklist: []
    };
  },
  created () {
  },
  computed: {
  },
  mounted () {
    this.verifyStatus = this.$route.query.verifyStatus
    this.loadDetailWidgetData()
  },
  methods: {
    /**
     * 合同回款计划
     */
    loadDetailWidgetData () {
      let params = {
        contractId: this.$route.query.contractId
      };
      return new Promise((resolve, reject) => {
        Contracts.tasklist(this, params).then(res => {
          this.tasklist = res.data
        }).catch(e => {
          reject(e);
        });
      });
    },
    // 创建任务
    addFromdata () {
      let params = {};
      this.$dialog.show('新建', TasksAdd, {
        area: '800px'
      }, params).then(res => {
        this.loadDetailWidgetData()
      }).catch(e => {});
      // this.$router.push('/ContractsTasksAdd')
    },
    /**
     * 修改任务
     */
    getTasks (data) {
      let params = {
        tasksId: data.id
      };
      this.$dialog.show('编辑', TasksAdd, {
        area: '800px'
      }, params).then(res => {
        this.loadDetailWidgetData()
      }).catch(e => {});
    },
    // 查看
    handleInfo (data) {
      let params = {
        tasksId: data.id
      };
      this.$dialog.show('详情', TasksDetail, {
        area: '800px'
      }, params).then(res => {
        this.loadDetailWidgetData()
      }).catch(e => {});
    }
  }
}
</script>

<style lang="scss" scoped>
h4{margin-bottom: 0;}
.table_container{margin: 10px 0;}
.form-single-info{
  display: flex;justify-content: center;
  li{list-style: none;}
}
.form-single-info>.el-col{position: relative;}
.form-button-right{position: absolute;right: 0;top: 12px;}
.el-form-info{box-shadow: 0 0 10px rgba(0,0,0,0.05);padding: 20px;}
/deep/.el-tabs__nav-wrap::after{display: none;}
/deep/.el-tabs__item.is-active{color: #051D69;font-weight: bold;}
/deep/.el-tabs__active-bar{background-color: #051D69;}
ul{
  padding: 0 7px;
  .primary,.warning,.success{box-shadow: 0px 0px 7px 0px rgba(77, 165, 255, 0.3);text-align: center;padding: 10px 0;font-weight: bold;margin-bottom: 10px;}
  .primary{color: #3a8ee6;border-top: 2px solid #409EFF;}
  .warning{color: #cf9236;border-top: 2px solid #e6a23c;}
  .success{color: #5daf34;border-top: 2px solid  #67c23a;}
  li{margin: 10px 0;}
}
.Taskslist{
  box-shadow: 0px 0px 7px 0px rgba(77, 165, 255, 0.3);border-radius: 0px 0px 4px 4px;padding: 10px 20px;
  display: flex;align-items: center;justify-content: space-between;
  h4{padding: 0;margin: 10px 0;font-weight: bold;}
  span{display: block;color: #409EFF;margin: 10px 0;}
  .color-text1{color: #F56C6C;}
  .color-text2{color: #C0C4CC;}
  .listimg{width: 60px;height: 60px;border-radius: 100%;overflow: hidden;}
  .listimg .el-image{width: 100%;height: 100%;}
}
</style>
